<template>
  <view style="display: flex">
    <input
      type="text"
      size="small"
      class="input"
      v-model="userValue"
      disabled
    />
    <button size="mini" @click="open">选 择</button>
  </view>

  <uni-popup ref="userPopup" type="right" class="userPopup">
    <view class="popup-body">
      <view class="search" style="display: flex; justify-content: space-around">
        <text class="search-label"> 姓名： </text>
        <uni-easyinput
          @change="change()"
          type="text"
          size="small"
          v-model="nickName"
          class="search-input"
          suffixIcon="search"
          @iconClick="fetchData"
        />
      </view>
      <uni-table
        ref="table"
        border
        stripe
        type="selection"
        emptyText="暂无更多数据"
        @selection-change="selectionChange"
        class="data-table"
      >
        <uni-tr>
          <uni-th width="50" align="center">姓名</uni-th>
          <uni-th width="100" align="center">部门</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in tableData" :key="index">
          <uni-td>{{ item.nickName }}</uni-td>
          <uni-td>
            <view class="name">{{ item.dept?.deptName || "无" }}</view>
          </uni-td>
        </uni-tr>
      </uni-table>
      <uni-pagination
        v-model="paginat.page"
        :total="paginat.total"
        :pageSize="paginat.size"
        :show-icon="true"
        @change="fetchData"
        key="page"
      />
      <view class="" style="display: flex; justify-content: space-around">
        <button type="danger" size="mini" @click="cancel">取 消</button>
        <button type="primary" size="mini" @click="onSubmit">添 加</button>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, defineProps, defineEmits, defineExpose, watch } from "vue";
import { listUser } from "@/api/user.js";
const props = defineProps({
  modelValue: [String, Object, Array],
  names: {
    type: String,
    default: "",
  },
  // 数量限制
  limit: {
    type: Number,
    default: 1000,
  },
});
const userValue = ref("");
watch(
  () => props.names,
  () => {
    userValue.value = props.names;
  },
  {
    deep: true,
  }
);
const emits = defineEmits(["update:modelValue", "change"]);
const tableData = ref([]);
const userPopup = ref();

const open = () => {
  userPopup.value.open();
};
const paginat = ref({
  page: 1,
  size: 15,
  paginat: 0,
});
const selectedIndexs = ref([]);
const selectionChange = (e) => {
  selectedIndexs.value = e.detail.index;
};
const nickName = ref(null);
const fetchData = () => {
  const params = {
    pageNum: paginat.value.page,
    pageSize: paginat.value.size,
  };
  nickName.value && (params.nickName = nickName.value);
  listUser(params).then((res) => {
    tableData.value = res.rows;
    paginat.value.total = res.total;
    selectedIndexs.value = [];
  });
};
fetchData();
const cancel = () => {
  userPopup.value.close();
};

const onSubmit = () => {
  const selectList = selectedIndexs.value.map((item) => tableData.value[item]);
  if (selectList.length > props.limit) {
    return uni.showToast({
      title: `最多选择${props.limit}人`,
    });
  }
  emits("change", {
    ids: selectList.map((user) => user.userId).join(","),
    names: selectList.map((user) => user.nickName).join(","),
    list: selectList,
    done: (names) => {
      userValue.value = names;
      cancel();
    },
  });
};
defineExpose({
  open,
  fetchData,
});
</script>

<style lang="scss" scoped>
.input {
  height: 70upx;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 10upx;
  flex: 1;
}
.popup-body {
  height: 100%;
  background-color: #fff;
  max-width: 80vw;
  .data-table {
    height: calc(100vh - 300upx);
    overflow: auto;
  }
}

.search {
  height: 120upx;
  padding: 20upx;
  &-label {
    line-height: 80upx;
  }
}
</style>
